<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>半场动画-实现小球购物车</title>
    <script src="../../lib/vue.js"></script>
    <style>
        .ball {
            width: 15px;
            height: 15px;
            border-radius: 50%;
            background-color: darkcyan;
        }
    </style>
</head>
<body>
    <div id="app">
        <input type="button" @click="flag=!flag" value="切换" />
        <transition  @before-enter="beforeEnter"
                     @enter="enter"
                     @after-enter="afterEnter" >
            <div class="ball" v-if="flag"></div>
        </transition>
    </div>

    <script>
        var vue = new Vue({
            el : '#app',
            data:{
                msg : "hello vue",
                flag : false
            },
            methods:{
                beforeEnter(el){
                    //起始位置
                    el.style.transform = "translate(0, 0)";
                },
                enter(el,done){
                    el.offsetHeight;
                    //结束位置
                    el.style.transform = "translate(80px, 300px)";
                    el.style.transition = 'all 1s ease';
                    //done===afterEnter，那么afterEnter存在的意义是？
                    //立即调用afterEnter函数
                    done();
                    // this.flag = !this.flag;
                },
                afterEnter(el){
                    this.flag = !this.flag;
                }
            }
        });
    </script>
</body>
</html>